import React, { useState } from 'react';
import { Drawer } from 'antd';
import TRNotification from '#/utils/notification';
import styles from './index.less';
import TimePeriod from '../GenerationPlan/componets/TimePeriod/index.jsx';

const DrawerComponent = ({ title, iconType, onPress, MyComponent, width = 1400, stations }) => {
  const [visible, setVisible] = useState(true);
  const [isTimeShow, setIsTimeShow] = useState(false);
  const [queryData, setQueryData] = useState({});
  const [refreshCount, setRefreshCount] = useState(0);
  const [dataCount, setDataCount] = useState([]);

  const _title = () => {
    return (
      <div className={styles.title}>
        {iconType ? (
          <img src="" />
        ) : (
          <img src="" />
        )}
        <div className={styles.iconText}>{title}</div>
      </div>
    );
  };
  const _onCloseDrawer = () => {
    setVisible(false);
    onPress({ index: 0 });
  };
  const _onSave = () => {
    onPress({
      index: 1,
    });
  };

  return (
    <>
      <Drawer
        className={styles._drawer}
        title={_title()}
        width={width}
        onClose={_onCloseDrawer}
        visible={visible}
      >
        {
          <MyComponent
            save={_onSave}
            setIsTimeShow={setIsTimeShow}
            setQueryData={setQueryData}
            refreshCount={refreshCount}
            setDataCount={setDataCount}
          />
        }
      </Drawer>
      {isTimeShow && (
        <TimePeriod
          isTimeShow={isTimeShow}
          setIsTimeShow={setIsTimeShow}
          setQueryData={setQueryData}
          queryData={queryData}
          setRefreshCount={setRefreshCount}
          stations={stations}
          dataCount={dataCount}
        />
      )}
    </>
  );
};
class MyDrawer {
  __key__ = '';

  show = (props) => {
    return new Promise((resolve) => {
      if (this.__key__ !== '') return;
      this.__key__ = String(Date.now());
      TRNotification.add({
        key: this.__key__,
        content: (
          <DrawerComponent
            {...props}
            onPress={(result) => {
              TRNotification.remove(this.__key__);
              this.__key__ = '';
              resolve(result);
            }}
          />
        ),
        duration: null,
      });
    });
  };

  dismiss = () => {
    if (this.__key__.length > 0) {
      TRNotification.remove(this.__key__);
      this.__key__ = '';
    }
  };
}

export default new MyDrawer();
